const contentBox = document.querySelector('.content')

// 1. 拿到 id 和 token, 验证是否存在
// 验证是否真实, 如果有问题, 直接跳转回到 login 页面
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
loginTest()
async function loginTest() {
  if (!id || !token) {

    // 把页面的标识信息存储起来
    window.localStorage.setItem('url', 'cart')

    // 跳转页面
    window.location.href = './login.html'
    return
  }

  // 2-2. 进行购物车列表的请求
  const res = await pAjax({
    url: 'http://localhost:8888/cart/list',
    data: `id=${id}`,
    dataType: 'json',
    token
  })

  // 2-3. 判断登录过期
  if (res.code !== 1) {
    // 把页面的标识信息存储起来
    window.localStorage.setItem('url', 'cart')

    // 跳转页面
    window.location.href = './login.html'
    return
  }

  // 2-4. 渲染页面
  bindHtml(res)
}

// 3. 渲染页面的函数
function bindHtml(res) {
  const {cart} = res

  // 3-1. 提前计算出一些内容
  // 3-1-1. 计算有多少个选中的
  // 从 cart 里面筛选出来所有 is_select 为 true 的
  const selectArr = cart.filter(item => item.is_select === true)
  const selectNum = selectArr.length
  // 3-1-2. 计算购买数量和总价
  // 从 cart 里面少选出来所有 is_select 为 true 的
  let totalPrice = 0
  let totalNum = 0
  selectArr.forEach(item => {
    totalPrice += item.current_price * item.cart_number
    totalNum += item.cart_number
  })

  let str = `
  <div class="top">
    <input class="selectAll" type="checkbox" ${ selectNum === cart.length ? 'checked' : '' }> 全选
  </div>
    <div class="center">
      <ul>
  `

  res.cart.forEach(item => {
    str += `
      <li>
        <div class="select">
          <input data-id="${ item.goods_id }" type="checkbox" ${ item.is_select ? 'checked' : '' } class="item">
        </div>
        <div class="img">
          <img src="${ item.img_small_logo }" alt="">
        </div>
        <div class="desc">${ item.title }</div>
        <div class="price">${ item.current_price }</div>
        <div class="number">
          <button data-id="${ item.goods_id }" class="numSub">-</button>
          <input type="text" value="${ item.cart_number }">
          <button data-id="${ item.goods_id }" class="numAdd">+</button>
        </div>
        <div class="xiaoji">
          ${ (item.current_price * item.cart_number).toFixed(2) }
        </div>
        <div class="delete">
          <button class="del" data-id="${ item.goods_id }">删除</button>
        </div>
      </li>
    `
  })

  str += `
      </ul>
    </div>
    <div class="bottom">
      <p class="number">
        购买数量 : <span>${ totalNum }</span>
      </p>
      <p class="btns">
        <button ${ selectNum ? '' : 'disabled' }>去结算</button>
        <button ${ cart.length ? '' : 'disabled' }>清空购物车</button>
        <button class="clear" ${ selectNum ? '' : 'disabled' }>删除所有已选中</button>
      </p>
      <p class="totalPrice">
        总价 : <span>${ totalPrice.toFixed(2) }</span>
      </p>
    </div>
  `

  // 插入到页面内部
  contentBox.innerHTML = str
}

// 4. 各种点击事件
// 事件委托
contentBox.addEventListener('click', async e => {
  e = e || window.event
  const target = e.target || e.srcElement

  // 判断点击的是单选按钮
  if (target.className === 'item') {
    // 拿到 id
    const goodsId = target.dataset.id
    const res = await pAjax({
      url: 'http://localhost:8888/cart/select',
      token,
      data: `id=${id}&goodsId=${goodsId}`,
      dataType: 'json',
      method: 'POST'
    })

    // 从新渲染页面
    loginTest()
  }

  // 判断全选按钮
  if (target.className === 'selectAll') {
    // 拿到当前这个按钮的选中状态
    const type = target.checked ? 1 : 0

    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/select/all',
      data: `id=${id}&type=${type}`,
      token,
      dataType: 'json',
      method: 'post'
    })

    // 修改完成从新请求数据
    loginTest()
  }

  // 判断点击的是数量 ++
  if (target.className === 'numAdd') {
    // 拿到元素身上的自动以属性
    const goodsId = target.dataset.id

    // 拿到购买的数量
    const num = target.previousElementSibling.value - 0 + 1

    // 发送请求
    await pAjax({
      url: 'http://localhost:8888/cart/number',
      token,
      data: `id=${id}&goodsId=${goodsId}&number=${num}`,
      dataType: 'json',
      method: 'POST'
    })

    // 从新请求数据
    loginTest()
  }

  // 判断点击的是数量 --
  if (target.className === 'numSub') {
    // 拿到元素身上的自动以属性
    const goodsId = target.dataset.id

    // 拿到购买的数量
    const num = target.nextElementSibling.value - 0 - 1

    // 判断一下, 如果 num === 0 什么也不做
    if (num <= 0) return

    // 发送请求
    await pAjax({
      url: 'http://localhost:8888/cart/number',
      token,
      data: `id=${id}&goodsId=${goodsId}&number=${num}`,
      dataType: 'json',
      method: 'POST'
    })

    // 从新请求数据
    loginTest()
  }

  // 判断点击的是删除按钮
  if (target.className === 'del') {
    // 拿到元素身上的自定义属性
    const goodsId = target.dataset.id

    // 直接发送请求
    await pAjax({
      url: 'http://localhost:8888/cart/remove',
      data: `id=${id}&goodsId=${goodsId}`,
      token,
      dataType: 'json'
    })

    // 重新请求列表数据
    loginTest()
  }

  // 判断点击的是删除所有已选中
  if (target.className === 'clear') {
    // 直接发送请求
    await pAjax({
      url: 'http://localhost:8888/cart/remove/select',
      data: `id=${id}`,
      token
    })

    // 从新请求列表数据
    loginTest()
  }
})



// const arr = [
//   {id: 1},
//   {id: 2},
//   {id: 3}
// ]

// // 从 arr 中过滤出来所有 id > 2 的项目
// const res = arr.filter(item => item.id > 2)

// console.log(res)
